<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导出多个 ECharts 图表为 ZIP 文件</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.6.0/echarts.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
</head>
<body>
<h1>导出多个 ECharts 图表为 ZIP 文件</h1>
<div id="chart1" style="width: 600px; height: 400px;"></div>
<div id="chart2" style="width: 600px; height: 400px;"></div>
<div id="chart3" style="width: 600px; height: 400px;"></div>
<button id="exportBtn">导出所有图表为 ZIP 文件</button>
<script type="module">
// 初始化三个 ECharts 实例
var chart1 = echarts.init(document.getElementById('chart1'));
var chart2 = echarts.init(document.getElementById('chart2'));
var chart3 = echarts.init(document.getElementById('chart3'));

// 配置项
var option1 = {
    title: { text: '图表1' },
    tooltip: {},
    xAxis: { type: 'category', data: ['A', 'B', 'C'] },
    yAxis: { type: 'value' },
    series: [{ data: [120, 200, 150], type: 'bar' }]
};
var option2 = {
    title: { text: '图表2' },
    tooltip: {},
    xAxis: { type: 'category', data: ['X', 'Y', 'Z'] },
    yAxis: { type: 'value' },
    series: [{ data: [80, 150, 100], type: 'line' }]
};
var option3 = {
    title: { text: '图表3' },
    tooltip: {},
    xAxis: { type: 'category', data: ['M', 'N', 'O'] },
    yAxis: { type: 'value' },
    series: [{ data: [-50, -100, -150], type: 'bar' }]
};

// 设置配置项
chart1.setOption(option1);
chart2.setOption(option2);
chart3.setOption(option3);
var abc;
// 导出按钮点击事件
document.getElementById('exportBtn').addEventListener('click', async () => {
    console.log('开始导出所有图表...');

    abc =  new Promise((resolve, reject) => {
            chart1.getDataURL({
                    type: 'png',
                    pixelRatio: 1,
                    backgroundColor: '#fff'
                }, (data) => {
                    if (data) 
                        resolve(data);
                     else 
                        reject(new Error(`无法获取 ${name} 的图片数据`));
                    
                });
            })
    
        console.log(abc)
    try {
        // 创建 JSZip 实例
        const zip = new JSZip();

        // 获取所有 ECharts 实例的 Base64 图片数据
        const charts = [
            { name: 'chart1.png', instance: chart1 },
            { name: 'chart2.png', instance: chart2 },
            { name: 'chart3.png', instance: chart3 }
        ];
        

       

        // for (const chart of charts) {
        //     const name = chart.name;
        //     const instance = chart.instance;
        //     const imgData = await new Promise((resolve, reject) => {
        //         instance.getDataURL({
        //             type: 'png',
        //             pixelRatio: 1,
        //             backgroundColor: '#fff'
        //         }, (data) => {
        //             if (data) {
        //                 resolve(data);
        //             }  else {
        //                 reject(new Error(`无法获取 ${name} 的图片数据`));
        //             } 
        //         });
        //     });
        //     console.log('图片数据获取成功:', imgData);
        //     const base64Data = imgData.split(',')[1];
        //     if (!base64Data) throw new Error(`${name} 的 Base64 数据格式错误`);
        //     const blob = new Blob([Uint8Array.from(atob(base64Data), c => c.charCodeAt(0))], { type: 'image/png' });
        //     zip.file(name, blob);
        //     console.log(`${name} 导出成功`);
        // }

        // 生成 ZIP 文件
        // console.log('正在生成 ZIP 文件...');
        // const content = await zip.generateAsync({ type: 'blob' });
        // saveAs(content, 'charts.zip');
        // console.log('ZIP 文件生成成功');
    } catch (error) {
        console.error('导出失败:', error);
    }
});
</script>
</body>
</html>